<template>
  <div id="cate">
    <!-- 搜索 -->
    <van-search
      v-model="value"
      shape="round"
      placeholder="请输入搜索关键词"
      disabled
      @click="$router.push('/home/popup')"
    />

    <div class="cate_center">
      <!-- 左侧导航 -->
      <van-sidebar v-model="activeKey" class="cate_center_left">
        <van-sidebar-item
          v-for="v in categoryList"
          :key="v.id"
          :title="v.name"
          @click="get(v.id)"
        />
      </van-sidebar>
      <!-- 右侧内容 -->
      <div class="cate_center_right">
        <div class="cate_banner">
          <img
            :src="this.currentCategory.banner_url"
            alt=""
            class="bannerimg"
          />
          <h2>{{ this.currentCategory.front_name }}</h2>
        </div>
        <div class="heng">
          <span></span>
          <h1>{{ this.currentCategory.name }}</h1>
        </div>
        <div>
          <van-grid :column-num="3">
            <van-grid-item
              :icon="v.wap_banner_url"
              :text="v.name"
              v-for="v in subCategoryList"
              :key="v.id"
            />
          </van-grid>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { GetCate, GetCateCenter } from "@/request/api";
export default {
  data() {
    return {
      activeKey: 0,
      value: "",
      categoryList: "",
      currentCategory: "",
      subCategoryList: "",
      daohangid: "",
    };
  },

  components: {},

  created() {
    GetCate().then((res) => {
      this.categoryList = res.data.categoryList;

      this.currentCategory = res.data.currentCategory;

      this.subCategoryList = this.currentCategory.subCategoryList;
      // console.log(res.data);
      //   console.log(this.currentCategory);
    });
  },
  beforeCreate() {
    Toast.loading({
      message: "加载中...",
      forbidClick: true,
      duration: 1000,
    });
  },
  methods: {
    get(a) {
      GetCateCenter({ id: a }).then((res) => {
        // console.log(res);
        this.currentCategory = res.data.currentCategory;
        this.subCategoryList = this.currentCategory.subCategoryList;
      });
    },
  },
};
</script>
<style lang='less' scoped>
.cate_center {
  height: 90vh;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  .cate_center_left {
    width: 20%;
  }
  .cate_center_right {
    width: 80%;
    .cate_banner {
      margin-right: 0.06rem;
      margin-left: 0.06rem;
      border-radius: 0.1rem;
      position: relative;
      .bannerimg {
        width: 100%;
        height: 1.4rem;
        border-radius: 0.1rem;
        box-shadow: 0 0 0.06rem #000;
      }
      h2 {
        // z-index: 999;
        position: absolute;
        left: 0;
        top: 0;
        background-color: rgba(22, 22, 22, 0.5);
        border-radius: 0.1rem;
        width: 100%;
        height: 1.4rem;
        text-align: center;
        line-height: 1.4rem;
        color: #fff;
      }
    }
    .heng {
      width: 100%;
      height: 0.5rem;
      position: relative;
      span {
        display: block;
        background-color: rgb(0, 0, 0);
        width: 50%;
        height: 0.02rem;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
      h1 {
        width: 25%;
        line-height: 0.5rem;
        text-align: center;
        z-index: 888;
        background-color: #fff;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
}
</style>